import { Button, Card, Table, Tag } from "antd";

import { PlusOutlined } from "@ant-design/icons";
import React, { useEffect, useState } from "react";
import Category from "./Category/Category";
import { ColumnsType } from "antd/lib/table";
import { store } from "@/app/store";
import { asyncGetAttrList } from "@/app/attr";
import { useDispatch, useSelector } from "react-redux";
import {
  AttrPageData,
  AttrPageListData,
  AttrValueData,
  AttrValueListData,
} from "@/api/attr/attr";
export default function Attr() {
  const dispatch = useDispatch();
  //  当前页
  const [current, setCurrent] = useState(1);
  // 每页数量
  const [pageSize, setPageSize] = useState(3);
  // 总数
  const [total, setTotal] = useState(0);
  // 属性值的数据
  const [pageList, setPageList] = useState<AttrPageListData>([]);
  //表格的相关
  const columns: ColumnsType<any> = [
    {
      title: "序号",
      dataIndex: "id",
      width: "70",
      align: "center",
      render: (x: any, y: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "属性名称",
      dataIndex: "attrName",
    },
    {
      title: "属性值名称列表",
      render: (row: any, index) => {
       return (
        <>
              {row.attrValueList.map((item: any) => {
              return <Tag  color="green" key={item.id}>{item.valueName}</Tag>;
            })}
        </>
       )

      },
    },
    {
      title:'操作',
      render:()=>{
        return<>
        <Button type="primary">编辑</Button>
        <Button type="primary"  className="ml" danger>删除</Button>
        </>
      }
    }
  ];

  //  获取三个id的数据
  let { category1Id, category2Id, category3Id } = useSelector(
    (state: any) => state.category
  );
  console.log(category1Id, category2Id, category3Id ,'category1Id, category2Id, category3Id ')

  // 获取属性列表的数据
  const getAttrPageList = async () => {
    console.log(category3Id);
    if (category3Id !== "" && category3Id) {
      await dispatch<any>(
        asyncGetAttrList({ category1Id, category2Id, category3Id })
      );
      let data = store.getState().attr.attrList || [];
      setPageList(data as any);
    }
  };

  useEffect(() => {
    getAttrPageList();
  }, [category3Id]);

  return (
    <div>
      <Card>
        <Category></Category>
      </Card>
      <Card className="mt">
        {/* 添加属性 */}
        <Button type="primary" icon={<PlusOutlined />}>
          添加属性
        </Button>
        {/* 表格 */}
        <Table
          rowKey={"id"}
          className="bl"
          dataSource={pageList}
          columns={columns}
          bordered
          pagination={{
            showSizeChanger: true,
            pageSizeOptions: [3, 5, 7, 9],
            pageSize: pageSize,
            current: current,
            total: total,
            showTotal: (total) => {
              return <span>总计{total}页</span>;
            },
            onChange: (page: number, pageSize: number) => {
              setCurrent(page);
              setPageSize(pageSize);
            },
          }}
        />
      </Card>
    </div>
  );
}
